import { useMemo } from 'react';
import { ProFormRadio, ProFormCheckbox } from '@ant-design/pro-components';
import type { ProFormInstance } from '@ant-design/pro-components';
// import { Button } from 'antd';
import useDispatcher from '../../hooks/useDispatcher';
import getProFileData from '../../getProFileData';
import styles from './style.less';

type Props = {
  formRef: ProFormInstance | any;
  OptionsTenantList: API.OptionsKeys[];
  tenantFather: string;
};

const TenantRadio: React.FC<Props> = ({ formRef, OptionsTenantList, tenantFather }) => {
  console.log('====OptionsTenantList', OptionsTenantList);

  const dispatch = useDispatcher();
  const { formValue } = getProFileData();

  // 单选框
  const changeTenantFather = (e: any) => {
    console.log('e===', e);
    const value = e.target.value;
    // 清空 tenantList
    const obj = {
      tenantList: [],
    };
    formRef.current?.setFieldsValue({ ...obj });
    dispatch('setFormValue', { ...obj });
    // todo: 根据optionalFlag===queryChannelList和useChannelList的默认赋值
    if (e) {
      const arr = OptionsTenantList.filter((item) => item.id === value) || [];
      // 查询渠道
      if (arr.length > 0 && arr[0].queryChannelList) {
        const queryChannelListBro: any = [...arr[0].queryChannelList.split(',')];
        formRef.current?.setFieldsValue({ queryChannelId: queryChannelListBro });
        dispatch('setFormValue', { queryChannelId: queryChannelListBro });
      }
      // 使用渠道
      if (arr.length > 0 && arr[0].useChannelList) {
        const useChannelListBro: any = [...arr[0].useChannelList.split(',')];
        formRef.current?.setFieldsValue({ useChannelId: useChannelListBro });
        dispatch('setFormValue', { useChannelId: useChannelListBro });
      }
    }
  };

  // 复选框
  const changeTenantList = (value: any) => {
    console.log('value===', value);
    const arr: any = OptionsTenantList.filter((item) => item.id === tenantFather) || [];
    let queryChannelListBro: any = [];
    let useChannelListBro: any = [];
    if (arr.length > 0) {
      arr[0]?.children.forEach((item: any) => {
        if (value.includes(item.id) && item.queryChannelList) {
          queryChannelListBro = [...queryChannelListBro, ...item.queryChannelList.split(',')];
        }
        if (value.includes(item.id) && item.useChannelList) {
          useChannelListBro = [...useChannelListBro, ...item.useChannelList.split(',')];
        }
      });
      formRef.current?.setFieldsValue({
        queryChannelId: queryChannelListBro,
        useChannelId: useChannelListBro,
      });
      dispatch('setFormValue', {
        queryChannelId: queryChannelListBro,
        useChannelId: useChannelListBro,
      });
    }

    // tenantFather

    // todo: 根据optionalFlag===queryChannelList和useChannelList的默认赋值
    // 清空 tenantList
    // const obj = {
    //   tenantList: [],
    // };
    // formRef.current?.setFieldsValue({ ...obj });
    // dispatch('setFormValue', { ...obj });
  };

  // 动态获取optionList
  const enumOptionsData = useMemo(() => {
    const optionsTenantList = [...OptionsTenantList] || [];
    optionsTenantList.forEach((item) => {
      if (item.id === tenantFather && item.children.length > 0) {
        item.label = (
          <div>
            <span>{item.name}</span>
            <div>
              <ProFormCheckbox.Group
                name="tenantList"
                layout="vertical"
                label={null}
                options={item.children}
                rules={[{ required: true, message: '不得为空' }]}
                fieldProps={{
                  onChange: changeTenantList,
                }}
              />
            </div>
          </div>
        );
      } else {
        item.label = item.name;
      }
    });
    return optionsTenantList;
  }, [OptionsTenantList, tenantFather]);

  return (
    <>
      <div className={styles['wrap-radio-body']}>
        <ProFormRadio.Group
          layout="vertical"
          labelCol={{ span: 8 }}
          width="lg"
          name="tenantFather"
          label="券使用渠道描述"
          options={enumOptionsData}
          rules={[{ required: true, message: '不得为空' }]}
          fieldProps={{
            onChange: changeTenantFather,
          }}
          placeholder={''}
        />
      </div>
    </>
  );
};

export default TenantRadio;
